<template>
	<view class="main">
		<u-navbar back-text="" :border-bottom="false"  title="交易记录">
			<view class="slot-wrap">
				<view class="right">
					<image src="../../static/images/ico/sx.png" mode=""></image>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="item">
				<view class="top">
					<view class="left">
						<view class="title">
							<text>买入</text>
							<text>BTC/USDT</text>
						</view>
						<view class="des">
							订单编号:20463998976876  12:30 02/15/2021
						</view>
					</view>
					<view class="right">
						<image src="../../static/images/btn/log.png" mode=""></image>
					</view>
				</view>
				<view class="cont">
					<view class="item">
						<view class="des">买入数量</view>
						<view class="title">100.00000000</view>
					</view>
					<view class="item">
						<view class="des">买入费用</view>
						<view class="title">10285376.00000000</view>
					</view>
					<view class="item">
						<view class="des">买入均价</view>
						<view class="title">1765213.00000000</view>
					</view>
				</view>
				<view class="cont">
					<view class="item">
						<view class="des">手续费</view>
						<view class="title">23.00000000</view>
					</view>
					<view class="item">
						<view class="des">补仓次数</view>
						<view class="title">0</view>
					</view>
					<view class="item">
						<view class="des">盈利</view>
						<view class="title">0.00000000</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="top">
					<view class="left">
						<view class="title">
							<text class="red">卖出</text>
							<text>BTC/USDT</text>
						</view>
						<view class="des">
							订单编号:20463998976876  12:30 02/15/2021
						</view>
					</view>
					<view class="right">
						<image src="../../static/images/btn/log.png" mode=""></image>
					</view>
				</view>
				<view class="cont">
					<view class="item">
						<view class="des">买入数量</view>
						<view class="title">100.00000000</view>
					</view>
					<view class="item">
						<view class="des">买入费用</view>
						<view class="title">10285376.00000000</view>
					</view>
					<view class="item">
						<view class="des">买入均价</view>
						<view class="title">1765213.00000000</view>
					</view>
				</view>
				<view class="cont">
					<view class="item">
						<view class="des">手续费</view>
						<view class="title">23.00000000</view>
					</view>
					<view class="item">
						<view class="des">补仓次数</view>
						<view class="title">0</view>
					</view>
					<view class="item">
						<view class="des">盈利</view>
						<view class="title">0.00000000</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		onShow() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background:$G-bg-color;
		.slot-wrap {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			padding:0 26rpx;
			.right{
				image{
					width: 30rpx;
					height: 28rpx;
				}
			}
		}
		.content{
			>.item{
				margin: 14rpx 28rpx;
				padding: 28rpx 28rpx 42rpx 28rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.top{
					display: flex;
					justify-content: space-between;
					.left{
						.title{
							font-size: 28rpx;
							font-family: $G-fm;
							font-weight: 600;
							color: #000000;
							line-height: 40rpx;
							text:nth-child(1){
								color: #03AD8F;
							}
							text:nth-child(1).red{
								color: #D04B63;
							}
						}
						.des{
							margin-top: 8rpx;
							font-size: 20rpx;
							font-family:$G-fm;
							font-weight: 600;
							color: #999999;
							line-height: 28rpx;
						}
					}
					.right{
						image{
							width: 60rpx;
							height: 60rpx;
							background: #E6E6E6;
							border-radius: 50%;
						}
					}
				}
				.cont{
					display: flex;
					justify-content: space-between;
					margin-top: 18rpx;
					.item{
						width: 32%;
						.des{
							font-size: 20rpx;
							font-family: $G-fm;
							font-weight: 400;
							color: #999999;
							line-height: 28rpx;
						}
						.title{
							margin-top: 10rpx;
							font-size: 20rpx;
							font-family: $G-fm;
							font-weight: 600;
							color: #000000;
							line-height: 28rpx;
							word-break:break-all;
						}
					}
					.item:last-child{
						text-align: right;
					}
				}
			}
		}
	}
</style>
